<template>
	<view class="pb-safe-area page">
		<view class="p-4 flex flex-column grid-gap-6">
			<view class="bg-bg-grey rounded-4">
				<view class="flex grid-gap-4 text-placeholder nav-tab rounded-top-left-4 rounded-top-right-4 bg">
					<view
						class="flex-1 flex flex-column flex-center grid-gap-2 rounded-top-left-4 rounded-top-right-4 py-4"
						:class="{ 'active': form.action === 'image' }" @tap="toggleAction('image')">
						<text class="font-weight-600 h8">图生视频</text>
						<text class="h10">照片生成视频</text>
					</view>
					<view
						class="flex-1 flex flex-column flex-center grid-gap-2 rounded-top-left-4 rounded-top-right-4 py-4"
						:class="{ 'active': form.action === 'photomontage' }" @tap="toggleAction('photomontage')">
						<text class="font-weight-600 h8">AI拥抱</text>
						<text class="h10">图片合成</text>
					</view>
					<view
						class="flex-1 flex flex-column flex-center grid-gap-2 rounded-top-left-4 rounded-top-right-4 py-4"
						:class="{ 'active': form.action === 'text' }" @tap="toggleAction('text')">
						<text class="font-weight-600 h8">文生视频</text>
						<text class="h10">文字生成视频</text>
					</view>
				</view>
				<view class="p-4" v-if="form.action === 'image'">
					<view class="border rounded-4 border-dashed p-4" @tap="chooseImage">
						<view class="flex flex-center" v-if="tempFile">
							<image :src="tempFile" mode="aspectFit"
								style="width: 60vw;height: 60vw;border-radius: 4px;" />
						</view>
						<view class="flex flex-column flex-center py-10 grid-gap-4" v-else>
							<image src="@/static/choose-image.png" mode="scaleToFill"
								style="width: 50px;height: 50px;" />
							<text class="h9 text-placeholder">选择图片</text>
						</view>
					</view>
				</view>
				<view class="p-4 flex grid-gap-4" v-else-if="form.action === 'photomontage'">
					<view class="flex-1 border rounded-4 border-dashed p-4" @tap="chooseCropperImage(1)">
						<view class="flex flex-center" v-if="tempFileA">
							<image :src="tempFileA" mode="aspectFit"
								style="width: 30vw;height: 50vw;border-radius: 4px;" />
						</view>
						<view class="flex flex-column flex-center py-10 grid-gap-4" v-else>
							<image src="@/static/choose-image.png" mode="scaleToFill"
								style="width: 50px;height: 50px;" />
							<text class="h9 text-placeholder">图片A</text>
							<text class="h10 text-placeholder">支持PNG、JPG格式</text>
						</view>
					</view>
					<view class="flex-1 border rounded-4 border-dashed p-4" @tap="chooseCropperImage(2)">
						<view class="flex flex-center" v-if="tempFileB">
							<image :src="tempFileB" mode="aspectFit"
								style="width: 30vw;height: 50vw;border-radius: 4px;" />
						</view>
						<view class="flex flex-column flex-center py-10 grid-gap-4" v-else>
							<image src="@/static/choose-image.png" mode="scaleToFill"
								style="width: 50px;height: 50px;" />
							<text class="h9 text-placeholder">图片B</text>
							<text class="h10 text-placeholder">支持PNG、JPG格式</text>
						</view>
					</view>
				</view>
				<view class="p-4 flex flex-column grid-gap-4" v-else-if="form.action === 'text'">
					<text class="font-weight-600 h9 text-white">描述词</text>
					<view class="flex grid-gap-4 bg rounded-4 p-4 flex-column">
						<textarea v-model="form.prompt" auto-height style="min-height: 100px;width:100%;"
							:placeholder="text_placeholder" class="h9 text-white font-weight-600"
							placeholder-class="text-placeholder" :maxlength="text_prompt_length"></textarea>
						<view class="flex grid-gap-2 flex-y-center flex-x-flex-end">
							<text class="h10"
								:class="{ 'text-placeholder': !USERINFO?.vip_state, 'text-4C402E': USERINFO?.vip_state }">{{
									form.prompt.length }}/{{ text_prompt_length }}</text>
							<text class="text-4C402E h10" v-if="USERINFO?.vip_state">VIP</text>
						</view>
					</view>
					<view class="flex flex-center" v-if="keywords.text.length > 0">
						<scroll-view scroll-x class="flex-1">
							<view class="flex flex-nowrap grid-gap-4 py-4">
								<text class="h10 py-1 px-4 bg rounded-round text-nowrap text-white"
									v-for="(item, index) in keywords.text" :key="index"
									@tap="form.prompt = `${form.prompt}${item}，`">{{ item }}</text>
							</view>
						</scroll-view>
						<view class="flex flex-center grid-gap-2 pl-4 py-2" @tap="randomKeywords(keywords.text)">
							<uni-icons type="loop" color="var(--xl-primary)"></uni-icons>
							<text class="h10 font-weight-500 text-primary">随机</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-bg-grey p-4 rounded-4 flex flex-column grid-gap-4"
				v-if="['image', 'photomontage'].includes(form.action)">
				<text class="font-weight-600 h9 text-white">描述词</text>
				<view class="flex grid-gap-4 bg rounded-4 p-4 flex-column">
					<textarea v-model="form.prompt" auto-height style="min-height: 100px;width:100%;"
						:placeholder="image_placeholder" class="h9 text-white font-weight-600"
						placeholder-class="text-placeholder" :maxlength="image_prompt_length"></textarea>
					<view class="flex grid-gap-2 flex-y-center flex-x-flex-end">
						<text class="h10"
							:class="{ 'text-placeholder': !USERINFO?.vip_state, 'text-4C402E': USERINFO?.vip_state }">{{
								form.prompt.length }}/{{ image_prompt_length }}</text>
						<text class="text-4C402E h10" v-if="USERINFO?.vip_state">VIP</text>
					</view>
				</view>
				<view class="flex flex-center" v-if="keywords.image.length > 0">
					<scroll-view scroll-x class="flex-1">
						<view class="flex flex-nowrap grid-gap-4 py-4">
							<text class="h10 py-1 px-4 bg rounded-round text-nowrap text-white"
								v-for="(item, index) in keywords.image" :key="index"
								@tap="form.prompt = `${form.prompt}${item}，`">{{ item }}</text>
						</view>
					</scroll-view>
					<view class="flex flex-center grid-gap-2 pl-4 py-2" @tap="randomKeywords(keywords.image)">
						<uni-icons type="loop" color="var(--xl-primary)"></uni-icons>
						<text class="h10 font-weight-500 text-primary">随机</text>
					</view>
				</view>
			</view>
			<view class="flex grid-gap-2 flex-center bg-bg-grey rounded-4 p-4" @tap="showParamsSettings = true"
				v-if="form.action === 'text'">
				<text class="font-weight-600 h9 flex-1 text-white">参数设置</text>
				<text class="text-placeholder h10 font-weight-600" v-if="form.quality === 'speedy'">高性能</text>
				<text class="text-placeholder h10 font-weight-600" v-else-if="form.quality === 'optimum'">高表现</text>
				<text class="py-1 border-left"></text>
				<!-- <text class="text-primary h10 font-weight-600">{{ form.duration }}s</text> -->
				<!-- <text class="py-1 border-left"></text> -->
				<text class="text-placeholder h10 font-weight-600">{{ form.arg_aspect_ratio }}</text>
				<uni-icons type="right" size="14"></uni-icons>
			</view>
			<view class="flex grid-gap-2 flex-center bg-bg-grey rounded-4 p-4" @tap="showParamsSettings = true"
				v-if="['image', 'photomontage'].includes(form.action)">
				<text class="font-weight-600 h9 flex-1 text-white">参数设置</text>
				<text class="text-placeholder h10 font-weight-600" v-if="form.quality === 'speedy'">高性能</text>
				<text class="text-placeholder h10 font-weight-600" v-else-if="form.quality === 'optimum'">高表现</text>
				<uni-icons type="right" size="14"></uni-icons>
			</view>
			<view class="flex flex-center rounded-round py-6 bg-primary text-white" @tap="submit">
				<text class="font-weight-600 h9" v-if="form.action === 'text'">{{ WEBCONFIG?.text_integral }} {{
					WEBCONFIG?.money_unit_name }}{{ WEBCONFIG?.money_name }}生成视频</text>
				<text class="font-weight-600 h9" v-else-if="['image', 'photomontage'].includes(form.action)">{{
					WEBCONFIG?.image_integral }} {{
						WEBCONFIG?.money_unit_name }}{{ WEBCONFIG?.money_name }}生成视频</text>
			</view>
			<scroll-view scroll-x
				v-if="GenerationExample.text && GenerationExample.text.length && form.action === 'text'">
				<view class="flex grid-gap-4 flex-nowrap">
					<view class="flex flex-column generation-example-item"
						v-for="(item, index) in GenerationExample.text" :key="index" @tap="preview(item)">
						<view class="flex flex-center bg-bg-grey rounded-4" style="width: 140px;height: 100px;"
							v-if="item.image">
							<image :src="item.image" mode="aspectFit" class="rounded-4"
								style="width: 140px;height: 100px;" />
						</view>
						<view class="flex flex-center bg-bg-grey rounded-4" style="width: 140px;height: 100px;"
							v-else>
							<uni-icons type="font" size="26" color="#191919" class="font-weight-600"></uni-icons>
						</view>
						<view class="title text-white text-ellipsis-1 h10 py-1 px-2">{{ item.prompt }}</view>
						<view class="videocam" v-if="item.video_url">
							<uni-icons type="videocam" size="26" color="#FFFFFF"></uni-icons>
						</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-x
				v-else-if="GenerationExample.image && GenerationExample.image.length && ['image', 'photomontage'].includes(form.action)">
				<view class="flex grid-gap-4 flex-nowrap">
					<view class="flex flex-column generation-example-item"
						v-for="(item, index) in GenerationExample.image" :key="index" @tap="preview(item)">
						<view class="flex flex-center bg-bg-grey rounded-4" style="width: 140px;height: 100px;"
							v-if="item.image">
							<image :src="item.image" mode="aspectFit" class="rounded-4"
								style="width: 140px;height: 100px;" />
						</view>
						<view class="flex flex-center bg-bg-grey rounded-4" style="width: 140px;height: 100px;"
							v-else>
							<uni-icons type="font" size="26" color="#191919" class="font-weight-600"></uni-icons>
						</view>
						<view class="title text-white text-ellipsis-1 h10 py-1 px-2">{{ item.prompt }}</view>
						<view class="videocam" v-if="item.video_url">
							<uni-icons type="videocam" size="26" color="#FFFFFF"></uni-icons>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<x-popup v-model="showAlert" top="30vh" auto-hide-tab-bar>
			<view class="h6 font-weight-600 p-4 text-center text-white">{{ AlertContent.title }}</view>
			<view class="flex-1 flex flex-column px-4 pb-safe-area">
				<mp-html :content="AlertContent.content" selectable class="text-wrap content text-white"></mp-html>
			</view>
		</x-popup>
		<x-popup v-model="showParamsSettings" top="50vh" auto-hide-tab-bar>
			<view class="pt-10"></view>
			<view class="flex-1 flex flex-column grid-gap-6 p-4 overflow-auto">
				<view class="flex flex-column grid-gap-4">
					<text class="font-weight-600 h9 text-white">视频质量</text>
					<view class="flex grid-gap-4 nav-tab text-placeholder">
						<view class="flex-1 flex flex-center flex-column py-4 grid-gap-2 rounded-4 bg-bg-grey"
							:class="{ 'active': form.quality === 'speedy' }" @tap="setFormItem('quality', 'speedy')">
							<text class="font-weight-600 h9">高性能</text>
							<text class="h10">生成速度更快</text>
						</view>
						<view
							class="flex-1 flex flex-center flex-column py-4 grid-gap-2 rounded-4 position-relative bg-bg-grey"
							:class="{ 'active': form.quality === 'optimum' }" @tap="setFormItem('quality', 'optimum')">
							<text class="font-weight-600 h9">高表现</text>
							<text class="h10">画面质量更佳</text>
							<text class="vip-position">VIP</text>
						</view>
					</view>
				</view>
				<!-- <view class="flex flex-column grid-gap-4" v-if="form.action === 'text'">
					<text class="font-weight-600 h9">视频时长</text>
					<view class="flex grid-gap-4">
						<view class="flex-1 flex flex-center flex-column py-4 grid-gap-2 rounded-4 bg-bg-grey"
							:class="{ 'active': form.duration === 5, 'bg-bg-grey text-placeholder': form.duration !== 5 }"
							 @tap="setFormItem('duration', 5)">
							<text class="font-weight-600 h9">5s</text>
						</view>
						<view class="flex-1 flex flex-center flex-column py-4 grid-gap-2 rounded-4 bg-bg-grey position-relative"
							:class="{ 'active': form.duration === 10, 'bg-bg-grey text-placeholder': form.duration !== 10 }"
							 @tap="setFormItem('duration', 10)">
							<text class="font-weight-600 h9">10s</text>
							<text class="vip-position">VIP</text>
						</view>
					</view>
				</view> -->
				<view class="flex flex-column grid-gap-4" v-if="form.action === 'text'">
					<text class="font-weight-600 h9 text-white">视频比例</text>
					<view class="flex grid-gap-4 nav-tab text-placeholder">
						<view class="flex-1 flex flex-center py-4 grid-gap-2 rounded-4 bg-bg-grey"
							:class="{ 'active': form.arg_aspect_ratio === '16:9' }"
							@tap="setFormItem('arg_aspect_ratio', '16:9')">
							<text class="border px-2 py-1 rounded-2 border-text border-2"></text>
							<text class="font-weight-600 h9">16:9</text>
						</view>
						<view class="flex-1 flex flex-center py-4 grid-gap-2 rounded-4 bg-bg-grey"
							:class="{ 'active': form.arg_aspect_ratio === '9:16' }"
							@tap="setFormItem('arg_aspect_ratio', '9:16')">
							<text class="border py-2 px-1 rounded-2 border-text border-2"></text>
							<text class="font-weight-600 h9">9:16</text>
						</view>
						<view class="flex-1 flex flex-center py-4 grid-gap-2 rounded-4 bg-bg-grey"
							:class="{ 'active': form.arg_aspect_ratio === '1:1' }"
							@tap="setFormItem('arg_aspect_ratio', '1:1')">
							<text class="border p-2 rounded-2 border-text border-2"></text>
							<text class="font-weight-600 h9">1:1</text>
						</view>
					</view>
				</view>
			</view>
			<view class="pb-safe-area"></view>
		</x-popup>
		<x-popup v-model="showPreview" top="30vh" auto-hide-tab-bar>
			<view v-if="find.video_url || find.image">
				<video :src="find.video_url" style="width: 100vw;height: 80vw;" v-if="find.video_url"></video>
				<image :src="find.image" mode="aspectFit" style="width: 100vw;height: 80vw;" v-else-if="find.image">
				</image>
			</view>
			<view class="p-4">
				<view class="h9 bg-plceholder p-4 rounded-4">
					{{ find.prompt }}</view>
			</view>
			<view class="pb-safe-area">
				<view class="p-4">
					<view class="flex flex-center rounded-round py-6 bg-text text-inverse" @tap="useExample">
						<text class="font-weight-600 h9">使用此指令</text>
					</view>
				</view>
			</view>
		</x-popup>
		<x-vip ref="xVipRef" @success="" auto-hide-tab-bar />
		<x-login ref="xLoginRef" @success="" auto-hide-tab-bar />
		<x-tabbar page="pages/index/index" />
	</view>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { onLoad, onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { $page, $message, $http, useStorage, $system } from '@/utils';
import { useUserStore, useWebConfigStore, useRefs } from '@/stores';
const storeage = useStorage();
const xVipRef = ref();
const xLoginRef = ref();
const webConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(webConfigStore);
const userStore = useUserStore();
const { USERINFO } = useRefs(userStore);
const form = ref({
	action: 'image',
	prompt: '',
	image: '',
	image2: '',
	quality: 'speedy',
	duration: 5,
	arg_aspect_ratio: '16:9',
});
const text_placeholder = computed(() => WEBCONFIG.value?.text_placeholder ? WEBCONFIG.value?.text_placeholder : '请输入文字描述');
const image_placeholder = computed(() => WEBCONFIG.value?.image_placeholder ? WEBCONFIG.value?.image_placeholder : '请输入文字描述');
const text_prompt_length = computed(() => {
	let length = 50;
	if (WEBCONFIG.value?.text_prompt_length) {
		length = WEBCONFIG.value?.text_prompt_length;
	}
	if (USERINFO.value?.vip_state && USERINFO.value?.text_prompt_length) {
		length = USERINFO.value?.text_prompt_length;
	}
	return length;
});
const image_prompt_length = computed(() => {
	let length = 50;
	if (WEBCONFIG.value?.image_prompt_length) {
		length = WEBCONFIG.value?.image_prompt_length;
	}
	if (USERINFO.value?.vip_state && USERINFO.value?.image_prompt_length) {
		length = USERINFO.value?.image_prompt_length;
	}
	return length;
});
const keywords = ref({
	text: [],
	image: []
});
const GenerationExample = ref({
	text: [],
	image: []
});
const tempFile = ref('');
// #ifdef MP-WEIXIN
const platform = 'mp-weixin';
// #endif
// #ifdef MP-TOUTIAO
const platform = 'mp-toutiao';
// #endif
const submit = () => {
	if (!userStore.hasLogin()) {
		xLoginRef.value.show();
		return;
	}
	if (form.value.action === 'text' && !form.value.prompt) {
		$message.error('请输入文字描述');
		return;
	}
	if (form.value.action === 'image' && !tempFile.value) {
		$message.error('请选择图片');
		return;
	}
	uni.showLoading({
		title: '生成中...',
		mask: true
	})
	if (form.value.prompt.endsWith('，')) {
		form.value.prompt = form.value.prompt.substring(0, form.value.prompt.length - 1);
	}
	if (form.value.action === 'image') {
		if (form.value.image) {
			$http.post('Generation/image', {
				data: {
					...form.value,
					platform: platform
				}
			}).then((res: any) => {
				uni.hideLoading();
				if (res.code === $http.ResponseCode.SUCCESS) {
					toggleAction(form.value.action);
					$page.switch('/pages/record/index')
				} else {
					$message.error(res.msg);
				}
			}).catch(() => {
				uni.hideLoading();
			})
		} else {
			if (USERINFO.value?.integral >= WEBCONFIG.value?.image_integral) {
				$http.upload('Generation/image', {
					filePath: tempFile.value,
					name: 'file',
					formData: {
						...form.value,
						platform: platform
					}
				}).then((res: any) => {
					uni.hideLoading();
					if (res.code === $http.ResponseCode.SUCCESS) {
						toggleAction(form.value.action);
						$page.switch('/pages/record/index')
					} else {
						$message.error(res.msg);
					}
				}).catch(() => {
					uni.hideLoading();
				})
			} else {
				uni.hideLoading();
				let content = `您的${WEBCONFIG.value?.money_name}不足，是否前往充值？`;
				if (!WEBCONFIG.value?.mp_audit && $system.isIOS()) {
					content = `您的${WEBCONFIG.value?.money_name}不足，iOS暂不支持购买`;
				}
				uni.showModal({
					title: '提示',
					content: content,
					success: (res) => {
						if (res.confirm) {
							if (WEBCONFIG.value?.mp_audit || !$system.isIOS()) {
								$page.open('/pages/register/index');
							}
						}
					}
				})
			}
		}
	} else if (form.value.action === 'photomontage') {
		$http.post('Generation/photomontage', {
			data: {
				...form.value,
				platform: platform
			}
		}).then((res: any) => {
			uni.hideLoading();
			if (res.code === $http.ResponseCode.SUCCESS) {
				toggleAction(form.value.action);
				$page.switch('/pages/record/index')
			} else {
				$message.error(res.msg);
			}
		}).catch(() => {
			uni.hideLoading();
		})
	} else {
		$http.post('Generation/text', {
			data: {
				...form.value,
				platform: platform
			}
		}).then((res: any) => {
			uni.hideLoading();
			if (res.code === $http.ResponseCode.SUCCESS) {
				toggleAction(form.value.action);
				$page.switch('/pages/record/index')
			} else {
				$message.error(res.msg);
			}
		}).catch(() => {
			uni.hideLoading();
		})
	}
}
const showParamsSettings = ref(false);
const AlertContent = ref({
	title: '',
	content: ''
});
const showAlert = ref(false);
const getAlert = () => {
	$http.get('Article/getContentByAlias', {
		data: {
			alias: 'alert'
		}
	}).then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			if (storeage.get('alert')) {
				return;
			}
			showAlert.value = true;
			AlertContent.value = res.data;
			storeage.set('alert', 1, 3600);
		}
	})
}
const getKeywords = () => {
	$http.get('Config/keywords').then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			keywords.value = res.data;
		}
	})
}
const randomKeywords = (list: string[]) => {
	if (list.length > 0) {
		const index = Math.floor(Math.random() * list.length);
		form.value.prompt = `${form.value.prompt}${list[index]}，`;
	}
}
const getGenerationExample = () => {
	$http.get('Config/GenerationExample').then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			GenerationExample.value = res.data;
		}
	})
}
const toggleAction = (action: string) => {
	form.value.action = action;
	form.value.prompt = '';
	form.value.image = '';
	form.value.image2 = '';
	form.value.quality = 'speedy';
	form.value.duration = 5;
	form.value.arg_aspect_ratio = '16:9';
	tempFile.value = '';
	tempFileA.value = '';
	tempFileB.value = '';
}
const setFormItem = (key: string, value: any) => {
	switch (key) {
		case 'quality':
			if (value === 'speedy') {
				form.value.duration = 5;
			}
			if (value === 'optimum' && !USERINFO.value?.vip_state) {
				if (!userStore.hasLogin()) {
					xLoginRef.value.show();
					return;
				}
				xVipRef.value.show();
				break;
			}
		case 'duration':
			if (form.value.quality === 'speedy' && value === 10) {
				$message.error('高性能模式下只支持5s视频');
				break;
			}
			if (value === 10 && !USERINFO.value?.vip_state) {
				if (!userStore.hasLogin()) {
					xLoginRef.value.show();
					return;
				}
				xVipRef.value.show();
				break;
			}
		default:
			form.value[key] = value;
			break;
	}
}
const chooseImage = () => {
	if (!userStore.hasLogin()) {
		xLoginRef.value.show();
		return;
	}
	uni.chooseImage({
		count: 1,
		sizeType: ['original'],
		sourceType: ['album'],
		success: (res: any) => {
			uni.showLoading({
				title: '上传中...',
				mask: true
			})
			$http.upload('Generation/upload', {
				filePath: res.tempFilePaths[0],
				name: 'file',
				formData: {
					...form.value,
					platform: platform
				}
			}).then((res: any) => {
				uni.hideLoading();
				if (res.code === $http.ResponseCode.SUCCESS) {
					form.value.image = res.data.url;
					tempFile.value = res.data.url;
				} else {
					$message.error(res.msg);
				}
			}).catch(() => {
				uni.hideLoading();
			})
		}
	})
}
const tempFileA = ref('');
const tempFileB = ref('');
const cropperImageIndex = ref(0);
const eventName = 'HomeChooseCropperImage';
const chooseCropperImage = (index: number) => {
	if (!userStore.hasLogin()) {
		xLoginRef.value.show();
		return;
	}
	cropperImageIndex.value = index;
	$page.open('/pages/index/cropper?event=' + eventName);
	uni.$once(eventName, handleCrop);
}
const handleCrop = (res: any) => {
	switch (cropperImageIndex.value) {
		case 1:
			form.value.image = res.data.url;
			tempFileA.value = res.data.url;
			break;
		case 2:
			form.value.image2 = res.data.url;
			tempFileB.value = res.data.url;
			break;
	}
}
const find = ref({
	id: '',
	prompt: '',
	image: '',
	video_url: '',
})
const showPreview = ref(false);
const preview = (item: any) => {
	find.value = item;
	showPreview.value = true;
}
const useExample = () => {
	if (form.value.prompt) {
		uni.showModal({
			title: '提示',
			content: '是否覆盖已编辑的内容？',
			success: (res) => {
				if (res.confirm) {
					form.value.prompt = find.value.prompt;
					if (find.value.type === 'image' && find.value.image) {
						tempFile.value = find.value.image;
						form.value.image = find.value.image;
					}
					showPreview.value = false;
				}
			}
		})
	} else {
		form.value.prompt = find.value.prompt;
		if (find.value.type === 'image' && find.value.image) {
			tempFile.value = find.value.image;
			form.value.image = find.value.image;
		}
		showPreview.value = false;
	}
}
onLoad((options: any) => {
	getAlert();
	getKeywords();
	getGenerationExample();
	// #ifdef MP-WEIXIN
	wx.login({
		success: () => {
		}
	})
	// #endif
})
onShow(() => {
	if (WEBCONFIG.value?.web_name) {
		uni.setNavigationBarTitle({
			title: WEBCONFIG.value.web_name
		})
	}
	uni.hideTabBar();
	$page.title();
	uni.$off(eventName, handleCrop);
})
onShareAppMessage(() => {
	return $page.shareMessage({
		title: '',
		path: `/pages/index/index`
	})
})
onShareTimeline(() => {
	return $page.shareTimeline({
		title: '',
		path: `/pages/index/index`
	})
})
</script>
<style lang="scss" scoped>
.nav-tab {
	position: relative;

	&::after {
		content: '';
		position: absolute;
		top: -1px;
		right: -1px;
		bottom: 0;
		width: 100%;
		background: radial-gradient(circle at 85% -180%, var(--xl-bg-grey) 20%, transparent 55%);
		border-radius: 16rpx;
		z-index: -1;
	}

	.active {
		background-color: var(--xl-bg-grey);

		.h8,
		.h9 {
			color: var(--xl-primary);
		}

		.h10 {
			color: #FFFFFF;
		}
	}
}

.generation-example-item {
	position: relative;
	height: 100px;
	width: 140px;

	.title {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.15);
		backdrop-filter: blur(10px);
		border-radius: 0 0 16rpx 16rpx;
	}

	.videocam {
		position: absolute;
		top: 50%;
		right: 50%;
		transform: translate(50%, -50%);
	}
}

.vip-position {
	position: absolute;
	top: 0;
	right: 0;
	background-color: #191919;
	color: #4C402E;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 0 16rpx 0 16rpx;
}
</style>